<template>
  <div class="body">
    <detail-header :scrollDown="true">
      {{ cinema.name }}
    </detail-header>

    <div class="cinema-info">
      <div class="tags" v-show="cinema.services">
        <span class="service" v-for="item in cinema.services" :key="item.name">
          {{ item.name }}
        </span>
        <i class="iconfont icon-icon_jiantou-you"></i>
      </div>
      <div class="info-text">
        <div class="left">
          <div class="name">{{ cinema.name }}</div>
          <div class="address">{{ cinema.address }}</div>
        </div>
        <div class="right">
          <i class="iconfont icon-dianhua"></i>
        </div>
      </div>
    </div>

    <div class="schedule-wrap">
      <div class="film-bg">
        <div
          :style="{backgroundImage: 'url('+ poster +')',}">
          <!--          :style="{-->
          <!--                backgroundImage: 'url(' + poster + ')',}">-->
        </div>
      </div>
      <div class="film-list">
        <div class="films-poster">
          <cinemasticket-swiper v-if="films.length" :key="films.length">
            <detail-swiper-item class="poster" v-for="(item,index) in films" :key="item.filmId">
              <div class="film-item">
                <div
                  :style="{
                backgroundImage: 'url(' + item.poster + ')',}"
                  class="photo-img" @click="handleChangePoster(item.poster,index,item.filmId,cinemaId)">
                </div>
              </div>
            </detail-swiper-item>
          </cinemasticket-swiper>
        </div>
        <i class="iconfont icon-zhijiao-up"></i>
      </div>
      <div class="film-info-container">
        <div class="fiml-info" v-for="(item,index) in films" :key="item.filmId" v-show="index === showIndex">
          <div class="film-title">
            {{ item.name }}
            <span class="grade">{{ item.grade }}<span>分</span></span>
          </div>
          <div class="film-desc">
            {{ item.category }} | {{ item.runtime }}分钟 |
            <span v-for="data in item.actors" :key="data.name">
            {{ data.name }}
          </span>
          </div>
        </div>
      </div>
      <!--   todo: 组件优化   -->
      <filmscinemas-swiper class="date">
        <detail-swiper-item class="avatar" v-for="(item,dateIndex) in dateList" :key="dateIndex">
          <div class="name" @click="handleColor(dateIndex,item)" :class="backcolorIndex===dateIndex?'active':''">
            <span>{{ item | dateFilter }}</span>
          </div>
        </detail-swiper-item>
      </filmscinemas-swiper>
      <div class="show-list-container" v-for="(item,ScheduleIndex) in dataSchedulesList"
           :key="ScheduleIndex" v-show="ScheduleIndex === backcolorIndex">
        <ul>
          <li v-show="item.schedules !== 0" v-for="(data,listIndex) in item.schedules" :key="listIndex">
            <div class="left">
              <div class="showAt">{{ data.showAt | atTimeFilter }}</div>
              <div class="endAt">{{ data.endAt | atTimeFilter }}散场</div>
            </div>
            <div class="second-left">
              <div class="filmLanguage-imagery">{{ data.filmLanguage }} {{ data.imagery }}</div>
              <div class="hallName">{{ data.hallName }}</div>
            </div>
            <div class="second-right">
              ￥<span class="salePrice">{{ (data.salePrice / 100).toFixed(1) }}</span>
            </div>
            <div class="right">
              <div class="button">购票</div>
            </div>
          </li>
        </ul>
        <!-- 无场次  -->
        <div class="schedule-list-empty" v-show="item.schedules === 0"  :style="{height:height}">
          <div class="empty-box">
            <img src="../assets/no-schedule.svg" alt="item">
            <div>暂无场次</div>
          </div>
        </div>
      </div>
      <!-- 无场次  -->
      <div class="schedule-list-empty" v-show="!dataSchedulesListLength"  :style="{height:height}">
        <div class="empty-box">
          <img src="../assets/no-data.svg" alt="item">
          <div>无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import detailHeader from '@/components/detail/DetailHeader'
import cinemasticketSwiper from '@/components/cinemasticket/CinemasTicketSwiper'
import detailSwiperItem from '@/components/detail/DetailSwiperItem';
import filmscinemasSwiper from '@/components/filmscinemas/FilmsCinemasSwiper'
import http from '@/util/http'
import myMixin from "@/util/myMixin";
import {mapMutations, mapState} from "vuex";
import Vue from "vue";
import moment from "moment";

Vue.filter("atTimeFilter", (date) => {
  return moment(date * 1000).format('H:mm')
})

export default {
  mixins: [myMixin],

  data() {
    return {
      cinema: '',
      films: '',
      showIndex: this.index,
      dateList: [],
      dataSchedulesList: [],
      dataSchedulesListLength: true,
      backcolorIndex: 0,
      cinemaId: '',
      height: '237px',
    }
  },
  computed: {
    ...mapState(['poster', 'index', 'first'])
  },
  components: {
    detailHeader,
    cinemasticketSwiper,
    detailSwiperItem,
    filmscinemasSwiper
  },
  methods: {
    ...mapMutations(['changePoster', 'changeIndex', 'changeFirst']),
    // 点击电影图片时，改变背景图、(当前index -> 为刷新数据后页面依然显示刷新前状态)
    handleChangePoster(poster, index, filmId,cinemaId) {
      this.changePoster(poster)
      this.changeIndex(index)
      this.showIndex = index

      // 让时间回到今天
      this.backcolorIndex = 0
      // 点击电影图片时请求对应的日程数据
      // http.httpForCinemaFilmSchedule(filmId, this.$route.params.cinemaId, this.$route.params.date).then(res=>{
      //   this.dataSchedulesList = res.data.data
      //   console.log(res.data.data)
      // })
      console.log('外面',this.cinemaId)
      let daysList = [];
      this.dateList.forEach(item => {
        setTimeout(function (){
          console.log(this.cinemaId)
          http.httpForCinemaFilmSchedule(filmId, cinemaId, item).then(res => {
            if (res.data.data) {
              daysList.push(res.data.data)
            } else {
              daysList.push({schedules:0})
            }
          })
        },500)
      })
      this.dataSchedulesList = daysList
      console.log(this.dataSchedulesList)
    },
    handleColor(dateIndex) {
      this.backcolorIndex = dateIndex
    }
  },
  created() {
    this.cinemaId = this.$route.params.cinemaId
    console.log(this.cinemaId)
    http.httpForCinemaInfo(this.cinemaId).then(res => {
      // console.log(res.data)
      this.cinema = res.data.data.cinema
    });
    http.httpForCinemaShowFilm(this.cinemaId).then(res => {
      // console.log(res.data)
      this.films = res.data.data.films
      this.showIndex = this.index

      // 实现一开始显示当前电影的信息：判断一开始进入页面，电影id处于films里面的第几个，然后改变index=几
      for (let i = 0; i < res.data.data.films.length; i++) {
        if (this.$route.params.filmId == res.data.data.films[i].filmId && this.first == 0) {
          this.changeFirst(1)  // first 为1，刷新的时候不进入该判断
          this.changeIndex(i)
          this.changePoster(res.data.data.films[i].poster)
          this.showIndex = i
          return
        }
      }
    });
    // 得到今明后三天时间戳
    this.dateList = [Number(this.$route.params.date), (Number(this.$route.params.date) + 86400), (Number(this.$route.params.date) + 172800)]
    // http.httpForCinemaFilmSchedule(this.$route.params.filmId, this.$route.params.cinemaId, this.$route.params.date).then(res=>{
    //   this.dataSchedulesList = res.data.data
    //   console.log(res.data.data)
    // })

    // 循环遍历三天时间戳，获取三天的电影日程
    let daysList = [];
    // let n = 0;
    this.dateList.forEach(item => {
      // setTimeout(function (){     // 防止误认是爬虫
        http.httpForCinemaFilmSchedule(this.$route.params.filmId, this.cinemaId, item).then(res => {
          // 如果获取数据失败  todo => 还有bug
          // if (res.data.status !== 0){
          //   n++
          // }

          // 判断返回数据是否为空，空的话直接跳过
          if (res.data.data) {
            daysList.push(res.data.data)
          } else {
            daysList.push({schedules:0})
          }
        })
      // },500)
    })
    // 三次都没获取成功就显示无数据
    // if (n===3){
    //   this.dataSchedulesListLength = !this.dataSchedulesListLength
    // }
    this.dataSchedulesList = daysList
  },
  mounted() {
    this.height = document.documentElement.clientHeight -
      430 + 'px'
  },
  destroyed() {
    this.changeFirst(0)
  }
}
</script>

<style lang="scss" scoped>
.body {
  overflow: hidden;
}

.cinema-info {
  margin-top: 45px;

  .tags {
    height: 38px;
    padding-top: 15px;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    color: #ffb232;

    .service {
      width: auto;
      height: 18px;
      line-height: 16px;
      padding: 0 6px;
      margin: 0 2.5px;
      font-size: 12px;
      border: 1px solid #ffb232;
      box-sizing: border-box;
    }

    .icon-icon_jiantou-you {
      line-height: 18px;
      height: 18px;
      margin-left: 3px;
      font-weight: 900;
      box-sizing: border-box;
      display: inline-block;
      font-size: 14px;
      -webkit-transform: scale(0.6); /*针对Chrome 设置字体缩小比例*/
      -o-transform: scale(1); /*针对能识别-webkit的opera browser设置*/
    }
  }

  .info-text {
    width: 100%;
    height: 74px;
    padding: 15px 0 15px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    .left {
      width: 2.34rem;
      box-sizing: border-box;

      .name {
        font-size: 17px;
        line-height: 24px;
        font-weight: 700;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .address {
        margin-top: 2px;
        font-size: 13px;
        line-height: 18.5px;
        color: #999;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .right {
      width: 73px;
      height: 31px;
      border-left: 1px solid #d8d8d8;
      text-align: center;

      i {
        padding-bottom: 2px;
        font-size: 26px;
        line-height: 31px;
        color: #52A7FF;
      }
    }
  }
}

.schedule-wrap {
  position: relative;
  background-color: #f5f5f5;

  .film-bg {
    height: 160px;
    width: 100%;
    padding: 15px 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;

    div {
      width: 100%;
      height: 100%;
      /* 加入高斯模糊：毛玻璃 */
      filter: blur(30px);
      -webkit-filter: blur(30px);
    }
  }

  .film-list {
    height: 160px;
    padding: 15px 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;

    .films-poster {
      margin-left: auto;
      margin-right: auto;
      overflow: hidden;
      height: 130px;

      .poster {
        width: 81.75px;

        .film-item {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          height: 100%;
          width: 100%;
          padding-top: 26px;
          -webkit-transition: all .5s ease;
          -o-transition: all .5s ease;
          transition: all .5s ease;
          box-sizing: border-box;

          .photo-img {
            width: 72px;
            height: 104px;
            background-position: center;
            background-size: cover;
            transition: all .5s ease;
            z-index: 99;
          }
        }
      }

      .swiper-slide-active {
        width: 81.75px;
        min-width: 90px !important;

        .film-item {
          padding-top: 0 !important;
        }

        .photo-img {
          width: 100% !important;
          height: 100% !important;
        }
      }
    }

    .icon-zhijiao-up {
      height: 17px;
      color: #fff;
      font-size: 22px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .film-info-container{
    background-color: #fff;
    width: 100%;
    height: 67px;

    .fiml-info {
      width: 100%;
      height: 67px;
      padding: 11px 15px;
      display: flex;
      align-items: center;
      flex-direction: column;
      box-sizing: border-box;

      .film-title {
        width: 330px;
        height: 24px;
        font-size: 18px;
        color: #333;
        font-weight: 700;
        text-align: center;

        .grade {
          font-size: 16px;
          color: #ffb400;
          margin-left: 5px;

          span {
            font-size: 12px;
          }
        }
      }

      .film-desc {
        width: 300px;
        height: 18.5px;
        font-size: 13px;
        margin-top: 2px;
        color: #999;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }


  .date:before {
    position: absolute;
    left: 0;
    height: 1px;
    width: 100%;
    content: "";
    background: #d8d8d8;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
  }

  .date {
    overflow: hidden;
    border-bottom: 1px solid #d8d8d8;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;

    .avatar {
      width: 125px;
      height: 45px;
      color: #666666;
      display: flex;
      justify-content: center;
      align-items: center;

      .name {
        width: 85%;
        height: 43px;
        text-align: center;

        span {
          line-height: 45px;
          font-size: 15px;
        }
      }

      .active {
        color: #f03d37;
        border-bottom: 2px solid #f03d37;
        border-radius: 1px;
      }
    }
  }

  .show-list-container {
    width: 100%;
    background-color: #fff;

    ul {

      li:before {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 1px;
        width: 100%;
        content: "";
        background: #d8d8d8;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
      }

      li {
        padding: 17px 13px;
        position: relative;
        display: flex;

        .left {

          .showAt {
            line-height: 1;
            white-space: nowrap;
            font-size: 20px;
            color: #333;
            font-family: PingFangSC-Regular, Hiragino Sans GB, sans-serif;
          }

          .endAt {
            margin-top: 7px;
            color: #999;
            font-size: 11px;
          }
        }

        .second-left {
          width: 115px;
          margin-left: 17px;

          .filmLanguage-imagery {
            margin-top: 2px;
            line-height: 18px;
            font-size: 13px;
            color: #333;
            white-space: normal;
          }

          .hallName {
            margin-top: 7px;
            font-size: 11px;
            color: #999;
            white-space: normal;
          }
        }

        .second-right {
          flex: 1;
          margin-left: 5px;
          font-size: 12px;
          color: #f03d37;
          text-align: center;

          .salePrice {
            font-size: 19px;
          }
        }

        .right {
          width: 45px;
          position: relative;

          .button {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            width: 100%;
            height: 25px;
            line-height: 26px;
            font-size: 12px;
            border: 1px solid #f06762;
            border-radius: 50px;
            color: #f03d37;
            text-align: center;
          }
        }
      }
    }
  }

  .schedule-list-empty {
    width: 100%;
    flex: 1;
    //height: 237px;
    text-align: center;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #f5f5f5;
    position: relative;

    .empty-box{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);

      img{
        width: 78px;
      }

      div{
        margin-top: 12px;
        color: #acacac;
      }
    }
  }
}
</style>
